<script>
import { routes } from '@/router/index'
import { ArrowRight,DArrowRight} from '@element-plus/icons-vue'
export default {
    data() {
        // 用来记录所有路由的 name 和对应的 label
        this.routesMap = new Map()
        this.initRoutersMap(routes)
         
        return {
            list: [],
            com: DArrowRight
        }
    },

    mounted() {
        // console.log(routes);
        // console.log(this.routesMap);
    },
    watch: {
        $route: {
            immediate: true,
            handler(newRoute) {
                // console.log(11111,newRoute);
                this.list = newRoute.matched.map(item => {
                    return {
                        name: item.name,
                        // 根据当前路由的 name 属性获取到对应的 label 值
                        label: this.routesMap.get(item.name)
                        /*
                            [
                                {name: 'banner', label: '轮播图管理'}
                            ]
                        */ 
                    }
                })

                // console.log('6666666',list);
            }
        }
    },
    methods: {
        initRoutersMap(routes) {

            routes.forEach(route => {
                this.routesMap.set(route.name, route.label)
                // 如果有子路由
                if (route.children) {
                        this.initRoutersMap(route.children)
                }
            })
        }
    },
}
</script>

<template>
    <el-breadcrumb separator=">">
          <el-breadcrumb-item 
            v-for="(item,index) in list"
            :key="item.name"
            :to="{ name: item.name }"> {{index == 0 ? '首页' :  item.label }} </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<style lang="scss" scoped>
.el-breadcrumb {
    padding-left: 20px;
    /* padding-top: 20px; */
    line-height: 45px;
    background-color: rgb(222, 220, 220);
}
</style>routes, 